<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        html,
        body {
            height: 100%;
        }

        #gongao {
            width: 1000px;
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            font-size: 13px;
            font-family: '宋体';
            background: #DDE5ED;
            color: #0C77CF;
            font-weight: bold;
        }

        .cusbtn1 {
            background: #17B424;
            height: 160px;
            text-align: center;
            color: white;
        }
        .cusbtn1:active {
             background: green;
        }

        .cusbtn1 i {
            color: white;
            font-size: 40px;
        }

        .cusbtn2 {
            height: 80px;
            text-align: center;
            background: #62AAF2;
            color: white;
        }
        .cusbtn2:active {
             background: #5A90C6;
        }
        .cusbtn2 i {
            color: white;
            font-size: 20px;
        }

        .cusbtn3 {
            height: 50px;
            background: #62AAF2;
            width: 98%;
            margin-left: 1%;
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
            line-height: 50px;
            text-align: center;
            color: white;
        }
        .cusbtn3:active {
             background: #5A90C6;
        }
        .cusbtn3 i {
            color: white;
            font-size: 16px;
        }
    </style>
</head>

<body>

    <div class="clear kong" style="height:200px;"></div>

    <!-- 天气插件 -->
    <div style="width:100%;height:72px;overflow: hidden;">
        <iframe scrolling="no" src="http://tianqiapi.com/api.php?style=th&skin=durian" frameborder="0" width="560" height="72" allowtransparency="true"></iframe>
    </div>

    <!-- 滚动公告 -->
    <div styel="font-size:12px;">
        <marquee direction="left" behavior="scroll" scrollamount="3" scrolldelay="1" style="color:#999999;font-size:13px;">
            连天彬1分钟前巡更了0466客户，陈仪3分钟前出警了00761客户，徐美春7分钟前巡更了5860客户,代武云8分钟前出警了4158客户......
        </marquee>

    </div>


    <div class="aui-row aui-row-padded" style="width:98%;margin-left:1%;">

        <div tapmode class="aui-col-xs-4 cusbtn1" style="padding-top:35px;">
            <i class="aui-iconfont aui-icon-mobile"></i>
            <div class="aui-grid-label">联网报警</div>
        </div>
        <div class="aui-col-xs-8" style="height:160px;padding-top:0;padding-right:0;">
            <div class="aui-row" style="width:100%;">
                <div tapmode class="aui-col-xs-6 cusbtn2" style="padding-top:13px;margin-left:-0.125rem;">
                    <i class="aui-iconfont aui-icon-home"></i>
                    <br> 家庭安保
                </div>
                <div tapmode class="aui-col-xs-6 cusbtn2" style="padding-top:13px;margin-left:0.125rem;">
                    <i class="aui-iconfont aui-icon-paper"></i>
                    <br> 企业安保
                </div>
                <div tapmode class="aui-col-xs-6 cusbtn2" style="padding-top:13px;margin-top:0.125rem;margin-left:-0.125rem;">
                    <i class="aui-iconfont aui-icon-video"></i>
                    <br> 视频安保
                </div>
                <div tapmode class="aui-col-xs-6 cusbtn2" style="padding-top:13px;margin-top:0.125rem;margin-left:0.125rem;">
                    <i class="aui-iconfont aui-icon-refresh"></i>
                    <br> 巡更巡逻
                </div>
            </div>
        </div>


    </div>


    <div tapmode class="aui-row cusbtn3">
        <div class="aui-col-xs-12">
            <i class="aui-iconfont aui-icon-phone"></i>一键服务
        </div>
    </div>







</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>
    var scrollPicture;
    apiready = function() {

        var banners = $api.getStorage('banners');

        //alert(JSON.stringify(banners));

        scrollPicture = api.require('UIScrollPicture');
        var arrayPath = new Array();
        for (var i = 0; i < banners['data'].length; i++) {
            //alert(banners['data'][i]['pic']);
            arrayPath[i] = 'http://192.168.1.100' + banners['data'][i]['pic'];
        }

        scrollPicture.open({
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: 200
            },
            data: {
                paths: arrayPath,
                url: 'test'
                    // captions: arrayTitle
            },
            styles: {
                caption: {
                    height: 35,
                    color: '#E0FFFF',
                    size: 13,
                    bgColor: '#696969',
                    position: 'bottom'
                },
                indicator: {
                    align: 'center',
                    color: '#cccccc',
                    activeColor: '#F0AD4E'
                }
            },
            placeholderImg: 'widget://image/ad2.jpg',
            contentMode: 'scaleToFill',
            interval: 3,
            fixedOn: api.frameName,
            loop: true,
            fixed: false
        }, function(ret, err) {
            if (ret.eventType == 'click') {
                //点击图片时
                //alert(banners['data'][ret.index]['url']);
                //location.href= 'http://192.168.1.100'+banners['data'][ret.index]['url'];
                api.openWin({
                    name: 'news',
                    url: './news.html',
                    pageParam: {
                        url: banners['data'][ret.index]['url']
                    },
                    delay: 200,
                    reload: true,
                    allowEdit: true
                });

            }
        });

    };

    //重新加载轮播图
    function reloadScroll() {
        //alert('test111111111111111');
        var banners = $api.getStorage('banners');
        //alert( JSON.stringify( banners ) );
        var arrayPath = new Array();
        for (var i = 0; i < banners['data'].length; i++) {
            //alert(banners['data'][i]['pic']);
            arrayPath[i] = 'http://192.168.1.100' + banners['data'][i]['pic'];
        }

        setTimeout(function(){
            scrollPicture.reloadData({
                data: {
                    paths: arrayPath,
                }
            });
        },1000);


    }

    //文字滚动
    function moveWord() {
        var resource = document.getElementById("word");
        var x = parseInt(window.getComputedStyle(resource, null).left); //获取当前文字所在x轴位置，并转换为int类型
        var tx = 500; //最右目标
        var rx = 125; //最左目标即起始位置
        if (x < tx && tag == 0) //向右滚动
        {
            x++;
            if (x == tx) //判断到达最右目标后，标志设置为1
                tag = 1;
        }
        if (x > rx && tag == 1) //向左滚动
        {
            x--;
            if (x == rx) //判断到达最左目标后，标志设置为0
                tag = 0;
        }
        resource.style.left = x + "px"; //设置对象的x轴位置
        t = setTimeout("moveWord()", 10); //执行更新，10代表移动的速度，值越大移动越慢

    }
</script>

</html>
